<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>复焕集 - 我的消息</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="fontawesome/css/all.min.css">
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/addProduct.css" />
<link rel="stylesheet" href="css/mineShowInformation.css" />
<link rel="stylesheet" href="css/mychartingRecords.css" />
</head>
<body>
	<!-- 导航栏 -->
	<div class="container-fluid fixed-top navbar-custom" id="top">
		<nav class="navbar navbar-expand-lg" role="navigation">
			<div class="container">
				<a href="#" class="navbar-brand navbar-b-custom"> <img
					src="img/headLogo.png" alt="复焕集" id="headImage">
				</a>
				<!-- 右侧用户信息栏 -->
				<ul class="navbar-nav mb-2 mb-lg-0 align-items-center">
					<input type="hidden" class="username" value=${sessionScope.logInUser.username}>
<!-- 					<img src=${sessionScope.seller.headimg} class="chatWithAvatar" style="display: none;">
					<input type="hidden" class="reciveusername" value=${sessionScope.seller.username}> -->
					<li class="nav-item d-flex align-items-center">
					<img src=${sessionScope.logInUser.headimg} alt="用户头像"
						class="headimg align-self-center headimg myAvatar"></li>
					<li class="nav-item"><a href="mineInformation.jsp"
						class="nav-link navbar-a-custom">我的主页</a></li>
					<li class="nav-item"><a href="mychartingRecords.jsp"
						class="nav-link navbar-a-custom">消息</a></li>
					<li class="nav-item "><a href="order.jsp"
						class="nav-link navbar-a-custom myOrders">我的订单</a></li>
				</ul>
			</div>
		</nav>
	</div>

	<!-- 左侧固定菜单 -->
	<div class="left-panel" id="left" style="margin-top:40px;">
		<div class="personal_Information">
			<div class="mine_personal_Information active">
				<img src="img/mine_personal_information.png" alt=""> <span
					class="mineInformation">我的信息</span>
			</div>
			<div class="mine_personal_Information Mytransaction">
				<img src="img/mine_information_order.png" alt=""> <span>我的交易</span>
				<img src="img/prePic.png" alt="" class="MytransactionPng MytransactionAction">
			</div>
			<a href="order.jsp">
				<div class="mine_personal_Information needHidden mine_order_Hidden">
					已购买</div>
			</a>
			<a href="ProductOrder.jsp">
				<div class="mine_personal_Information needHidden mine_order_Hidden">
					订单处理</div>
			</a>
			<a href="addProduct.jsp">
                <div class="mine_personal_Information needHidden mine_order_Hidden" >
                     	添加商品
                </div>
            </a>
            <a href="myFollows.jsp">
			<div class="mine_personal_Information">
				<img src="img/mine_personal_collect.png" alt=""> <span>我的收藏</span>
			</div>
			</a>
			<div class="mine_personal_Information AccountSettings">
				<img src="img/mine_information_set.png" alt=""> <span class="">账户设置</span>
				<img src="img/prePic.png" alt=""
					class="AccountSettingsPng AccountSettingsAction">
			</div>
			<a href="mineInformation.jsp">
				<div class="mine_personal_Information needHidden mine_personal_Information_Hidden">
					个人资料</div>
			</a> 
			<a href="informationModification.jsp">
				<div class="mine_personal_Information needHidden mine_personal_Information_Hidden">
					账号与安全</div>
			</a>

		</div>
	</div>

	<!-- 右侧固定导航栏 -->
	<div class="right-panel">
		<div class="right-section">
			<div class="right-title">常用功能</div>
			<a href="#" class="right-link"><i class="fas fa-store"></i> 我的店铺</a>
			<a href="#" class="right-link"><i class="fas fa-history"></i>
				浏览历史</a> <a href="#" class="right-link"><i class="fas fa-gift"></i>
				优惠券</a> <a href="#" class="right-link"><i class="fas fa-wallet"></i>
				钱包</a> <a href="#" class="right-link"><i class="fas fa-comment-alt"></i>
				我的评价</a> <a href="#" class="right-link"><i
				class="fas fa-question-circle"></i> 帮助中心</a>
		</div>
	</div>
	<!-- 连接状态指示器 -->
	<div class="connection-status">
		<span class="status-indicator disconnected" id="statusIndicator"></span>
		<!-- <span id="statusText">连接已断开</span> -->
	</div>

	<!-- 中部内容区 - 聊天页面 -->
	<div class="main-chat-container main-content">
		<div class="row">
			<!-- 聊天列表侧边栏 -->
			<div
				class="col-lg-3 chat-sidebar bg-white shadow-sm rounded-lg h-[calc(100vh-150px)] overflow-hidden">
				<div
					class="sidebar-header d-flex justify-content-between align-items-center p-3 border-bottom">
					<h4 class="mb-0">最近聊天</h4>
				</div>

				<div class="chat-list overflow-y-auto h-[calc(100%-120px)]">
					


				</div>
			</div>

			<!-- 聊天主区域 -->
 			<div class="col-lg-9 chat-main-area">
				<!-- 聊天头部 -->
				<div class="chat-header bg-white shadow-sm rounded-t-lg p-3 d-flex justify-content-between align-items-center">
					<div class="d-flex align-items-center">
						<div class="user-info d-flex align-items-center">
							<!-- 动态显示头像 -->
							<%-- <img id="chatWithAvatarImg" src=${sessionScope.seller.headimg} class="rounded-circle mr-3" width="48">
							<div>
								<!-- 动态显示用户名 -->
								<h4 id="chatWithName" class="mb-0">${sessionScope.seller.username}</h4>
							</div> --%>
						</div>
					</div>
				</div> 

				<!-- 消息显示区域 -->
				<div class="chat-messages bg-light p-4 h-[calc(100vh-280px)] overflow-y-auto" id="message-container">
					
					
				</div>
				

				<!-- 消息输入区域 -->
				<div class="chat-input bg-white shadow-sm rounded-b-lg p-3">
					<div class="input-group">
						<input type="text" class="form-control" id="message"
							placeholder="输入消息...">
						<div class="input-group-append">
							<button class="btn btn-primary" id="send-message" type="button">
								<i class="fas fa-paper-plane"></i>
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 底部区 -->
	<footer class="container-fluid bottom p-3 mt-auto" id="footer">
		<div class="infoLeft mx-auto">
			<strong>复焕集 </strong>旧物也能焕然一新的二手市场。
		</div>
		<div class="container">
			<div class="d-flex flex-wrap justify-content-between">
				<ul class="footer-links mb-2 mb-lg-0 flex-grow-1 px-3 text-center">
					<strong>关于我们</strong>
					<li><a href="">公司介绍</a></li>
					<li><a href="">团队介绍</a></li>
					<li><a href="">媒体报道</a></li>
					<li><a href="">加入我们</a></li>
				</ul>
				<ul class="footer-links mb-2 mb-lg-0 flex-grow-1 px-3 text-center">
					<strong>帮助中心</strong>
					<li><a href="">新手入门</a></li>
					<li><a href="">交易流程</a></li>
					<li><a href="">常见问题</a></li>
					<li><a href="">安全指南</a></li>
				</ul>
				<ul class="footer-links mb-2 mb-lg-0 flex-grow-1 px-3 text-center">
					<strong>规则中心</strong>
					<li><a href="">用户协议</a></li>
					<li><a href="">隐私政策</a></li>
					<li><a href="">交易规则</a></li>
					<li><a href="">社区公约</a></li>
				</ul>
				<ul class="footer-links mb-2 mb-lg-0 flex-grow-1 px-3 text-center">
					<strong>联系我们</strong>
					<li><a href="">客服电话：400-114-514</a></li>
					<li><a href="">商务合作：bd@fuhuanji.com</a></li>
					<li><a href="">举报反馈：report@fuhuanji.com</a></li>
				</ul>
			</div>
		</div>
		<div class="copyright">© 2023 复焕集 All Rights Reserved.
			蜀ICP备12345678号</div>
	</footer>
	<script src="bootstrap/js/bootstrap.min.js"></script>
	<script src="js/jquery.js"></script>
	<script src="js/mineInformation.js"></script>
	<!-- <script src="js/chartingRecords.js"></script> -->
	<script src="js/chartingMyRecords.js"></script>
</body>
</html>